<template>
	<view>
		<!-- 顶部 -->
		<view class="custom_navigation">
			<view class="status_bar"></view>
			<view class="navigation_bar">我的</view>
		</view>
		<!-- 内容模块 -->
		<view class="cont" :style="{'margin-top':contHeight}">
			<!-- 个人信息 -->
			<view class="personInfo">
				<navigator hover-class="false" class="personInfo_left" url="personInfo">
					<view class="personInfo_left_info">
						<headimg :realSrc="avatar"></headimg>
						<view class="personInfo_nicheng">{{nicheng}}</view>
					</view>
					<view class="personInfo_left_tip">
						<i class="iconfont iconhuangguan_huaban1"></i>
						<view class="personInfo_left_tip_text">{{tip}}</view>
					</view>
				</navigator>
				<navigator hover-class="false" class="personInfo_right" url="QRcode">
					<i class="iconfont iconerweima_2"></i>
				</navigator>
			</view>

			<!-- 手机号 -->
			<navigator hover-class="false" class="phone" url="updatePhone">
				<view class="phone_tip">点击绑定手机号，确保账户安全</view>
				<view class="phone_btn">去绑定</view>
			</navigator>

			<!-- 订单模块 -->
			<view class="list">
				<view class="list-left">
					<navigator hover-class="false" class="listItem" :url="item.url" v-for="(item,index) in orderList" :key="index">
						<i class="iconfont" :class="item.icon"></i>
						<text>{{item.name}}</text>
					</navigator>
				</view>
				<navigator hover-class="false" class="list-right" url="../order/orderList">
					<view class="list-right-border"></view>
					<view class="listItem">
						<i class="iconfont icondingdan1"></i>
						<text>全部订单</text>
					</view>
				</navigator>
			</view>

			<!-- 账户模块 -->
			<view class="list">
				<view class="list-left">
					<navigator hover-class="false" class="listItem" :url="item.url" v-for="(item,index) in accountList" :key="index">
						<view class="listItem-value">{{item.value}}<text>{{item.name == '积分' ? '个' :item.name == '优惠券' ? '张' : '元'}}</text></view>
						<text>{{item.name}}</text>
					</navigator>
				</view>
				<navigator hover-class="false" class="list-right" url="wallet">
					<view class="list-right-border"></view>
					<view class="listItem">
						<i class="iconfont iconqianbao"></i>
						<text>我的钱包</text>
					</view>
				</navigator>
			</view>

			<!-- 其它 -->
			<view class="otherList">
				<navigator hover-class="false" class="listItem" :url="item.url" v-for="(item,index) in otherList" :key="index">
					<i class="iconfont" :class="item.icon" :style="{color:item.iconColor}"></i>
					<text>{{item.name}}</text>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import headimg from '@/components/head_img.vue';
	export default {
		components: {
			headimg
		},
		data() {
			return {
				contHeight: this.util.getHeight(), //内容模块距顶部的高度
				avatar: uni.getStorageSync('userInfo').avatar, //头像
				nicheng: uni.getStorageSync('userInfo').nicheng ? uni.getStorageSync('userInfo').nicheng : '未设置昵称', //昵称
				tip: '铜牌', //等级标签
				orderList: [{ //订单模块
					name: '待付款',
					icon: 'icondaifukuan',
					url: '/pages/order/orderList?type=1'
				}, {
					name: '待收货',
					icon: 'icondaifahuo',
					url: '/pages/order/orderList?type=3'
				}, {
					name: '待评价',
					icon: 'icondingdan1',
					url: '/pages/order/orderList?type=4'
				}, {
					name: '退换货',
					icon: 'icontuihuanhuo'
				}],
				accountList: [{ //账户模块
					name: '账户余额',
					value: '1000.00',
					url: '/pages/mine/wallet'
				}, {
					name: '积分',
					value: '1024',
					url: '/pages/mine/integral'
				}, {
					name: '优惠券',
					value: '8',
					url: '/pages/mine/coupon'
				}],
				otherList: [{ //其他模块
					name: '商品收藏',
					icon: 'iconshangpin-',
					iconColor: '#FDC916',
					url: '/pages/order/collection'
				}, {
					name: '浏览足迹',
					icon: 'iconzuji',
					iconColor: '#75C0F4',
					url: '/pages/order/collection?type=2'
				}, {
					name: '积分商城',
					icon: 'iconxunzhang-fill',
					iconColor: '#FFA300',
					url: '/pages/order/integral'
				}, {
					name: '邀请好友',
					icon: 'iconyaoqinghaoyou',
					iconColor: '#FF8363',
					url: '/pages/mine/QRcode'
				}, {
					name: '我的拼团',
					icon: 'iconyaoqinghaoyou',
					iconColor: '#FF8363',
					url: '/pages/order/groupList'
				}, {
					name: '常见问题',
					icon: 'iconxiaoxi',
					iconColor: '#A98DFF',
					url: '/pages/mine/problem'
				}, {
					name: '分销中心',
					icon: 'iconfenxiaoshang',
					iconColor: '#FF633B',
					url: ''
				}, {
					name: '系统设置',
					icon: 'iconshezhi2',
					iconColor: '#72D395',
					url: '/pages/mine/setting'
				}]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100upx;
	}

	.custom_navigation,
	.personInfo {
		background-color: #E6B873;
	}

	.personInfo {
		height: 96upx;
		width: calc(100% - 100upx);
		padding: 20upx 60upx 84upx 40upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.personInfo_left {
			width: 75%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.personInfo_left_info {
				width: 75%;
				display: flex;
				align-items: center;

				.head_image {
					width: 96upx;
					height: 96upx;
					margin-right: 30upx;
				}

				.personInfo_nicheng {
					color: #FFFFFF;
					font-size: 32upx;
					width: calc(100% - 126upx);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.personInfo_left_tip {
				height: 40upx;
				background-color: #C4AA7A;
				border-radius: 20upx;
				display: flex;
				align-items: center;

				i {
					width: 40upx;
					height: 40upx;
					line-height: 40upx;
					text-align: center;
					color: #FFFFFF;
					background: #EAD5B0;
					border-radius: 50%;
				}

				.personInfo_left_tip_text {
					color: #FFFFFF;
					font-size: 20upx;
					white-space: nowrap;
					padding: 0 8upx 0 4upx;
				}
			}
		}

		.personInfo_right {
			width: 20%;
			text-align: right;

			i {
				color: #FFFFFF;
				font-size: 44upx;
			}
		}
	}

	.phone {
		height: 70upx;
		padding: 0 30upx;
		width: calc(100% - 60upx);
		background-color: #FDEFD8;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.phone_tip {
			color: #E6B873;
			font-size: 24upx;
		}

		.phone_btn {
			color: #FFFFFF;
			padding: 4upx 24upx;
			border-radius: 26upx;
			background: linear-gradient(270deg, #EECB87 0%, #E9B664 100%);
		}
	}

	.listItem {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		i {
			color: #1C1C1C;
			font-size: 42upx;
		}

		text {
			color: #999999;
			font-size: 24upx;
		}

		.listItem-value {
			color: #E6B873;
			font-weight: 500;
			display: inline-flex;
			align-items: flex-end;

			text {
				color: #E6B873;
				font-weight: 400;
				font-size: 16upx;
				margin-left: 6upx;
			}
		}
	}

	.list {
		width: 100%;
		height: 176upx;
		background-color: #FFFFFF;
		margin-bottom: 10upx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.list-left {
			width: 78%;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.list-right {
			width: 22%;
			text-align: center;
			display: inline-flex;
			align-items: center;
			border-left-style: solid;
			border-left-width: 2upx;
			border-left-color: #E7E7E7;

			.list-right-border {
				width: 0;
				height: 0;
				border: 10upx solid transparent;
				border-left-color: #E7E7E7;
				margin-right: 8%;
			}

			i {
				color: #E6B873;
			}
		}
	}

	.otherList {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #FFFFFF;

		.listItem {
			width: 25%;
			height: 160upx;

			i {
				font-size: 48upx;
				margin-bottom: 10upx;
			}
		}
	}
</style>
